<template>
  <div>
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   @click="addProfessional()"
                   size="mini">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="detailListProfessional"
              border>
      <el-table-column label="姓名"
                       min-width="100"
                       align="center"
                       prop="name">
        <template slot-scope="scope">
          <el-input placeholder="请输入内容"
                    v-if="scope.row.showInput"
                    type="text"
                    v-model="scope.row.name" />
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位"
                       min-width="100"
                       align="center"
                       prop="title">
        <template slot-scope="scope">
          <el-input placeholder="请输入内容"
                    v-if="scope.row.showInput"
                    type="text"
                    v-model="scope.row.title" />
          <span v-else>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="职称"
                       min-width="100"
                       align="center"
                       prop="position">
        <template slot-scope="scope">
          <el-input placeholder="请输入内容"
                    v-if="scope.row.showInput"
                    type="text"
                    v-model="scope.row.position" />
          <span v-else>{{scope.row.position}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     v-if="!scope.row.showInput"
                     @click="handleUpdateProfessional(scope.row)">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-circle-check"
                     @click="handleSaveProfessional(scope.row)"
                     v-if="scope.row.showInput">保存</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     v-if="!scope.row.showInput"
                     @click="handleDeleteProfessional(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
 <!-- 维修专业 -->
<script>
import { default as apiList } from '../../apis/renyuan';
export default {
    name: 'professional',
    components: {},
    data() {
        return {
            detailListProfessional: [
                {
                    name: '',
                    title: '',
                    position: '',
                    showInput: true,
                    id: 0,
                },
            ],
            id: 0,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        ...apiList,
        /* 新增一行 */
        addProfessional() {
            this.detailListProfessional.push({
                id: ++this.id,
                showInput: true,
            });
        },

        /* 修改一行 */
        handleUpdateProfessional(row) {
            row.showInput = true;
        },

        /* 保存一行 */
        handleSaveProfessional(row) {
            console.log(row, 'handleSaveProfessional44444444');
            if (row.pkId) {
                row.showInput = false;
                this.updesheji({
                    sort: 2,
                    name: row.name,
                    title: row.title,
                    position: row.position,
                    busiId: this.$route.query.id,
                    showInput: row.showInput,
                    pkId: row.pkId,
                }).then(res => {
                    if ((res.data = true)) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        });
                        this.getList();
                    } else {
                        this.$message.error('修改失败');
                    }
                });
            } else {
                row.showInput = false;
                this.addsheji({
                    sort: 2,
                    name: row.name,
                    title: row.title,
                    position: row.position,
                    busiId: this.$route.query.id,
                    showInput: row.showInput,
                }).then(res => {
                    if ((res.data = true)) {
                        this.$message({
                            message: '保存成功',
                            type: 'success',
                        });
                        this.getList();
                    } else {
                        this.$message.error('保存失败');
                    }
                });
            }
        },

        /** 删除按钮操作 */
        handleDeleteProfessional(row) {
            var h = [];
            h.push(row.pkId);
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.deletesheji(h).then(res => {
                        if ((res.data = true)) {
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                            });
                            this.getList();
                        } else {
                            this.$message.error('删除失败');
                        }
                    });
                })
                .catch(err => {
                    this.$message({
                        type: 'error',
                        message: '操作取消',
                    });
                });
        },

        /** 查询列表 */
        getList() {
            this.searchsheji({ sort: 2, busiId: this.$route.query.id }).then(res => {
                this.detailListProfessional = res.data;
            });
        },
    },
};
</script>
 
<style lang="scss" scoped>
.detail {
    padding: 15px;
}
.mb8 {
    padding-bottom: 5px;
}
</style>